<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>分析生命周期</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <button @click="add">点我n++</button>
            <button @click="bye">点我销毁vm</button>
            <h2>{{n}}</h2>
        </div>
        ===============================模板2
        <!-- template会替换掉这里 root2所在的div -->
        <div id="root2">

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止生产提示
                const vm =  new Vue({
                    el:'#root',
                    data:{
                        n:0
                    },
                    methods: {
                        add(){
                            //点击销毁vm之后，再点击add，在23年之前的版本还是会打印add，但n不会再变化；23年之后的就不会打印add了
                            console.log('add')
                            this.n++
                        },
                        bye(){
                            console.log('destroy')
                            this.$destroy()
                            //销毁vm之后，会解绑vue全部指令以及移除自定义事件监听器，但不会移除原生的DOM事件@click
                        }
                    },
                    //当vm被销毁后，监听器也不能用了
                    watch:{
                        n(){
                            console.log('n被修改了')
                        }
                    },
                    beforeCreate() {
                        console.log('beforeCreate')
                        //debugger
                    },
                    created() {
                        console.log('created')
                    },
                    beforeMount() {
                        console.log('created')
                        //在这里操作DOM，最终不会生效
                        document.querySelector('h2').innerText = '哈哈'
                    },
                    mounted() {
                        //此时操作DOM有效
                        //document.querySelector('h2').innerText = '哈哈'
                    },
                    beforeUpdate() {
                        console.log('beforeUpdate')
                    },
                    updated() {
                        console.log('updated')
                    },
                    beforeDestroy() {
                        console.log('beforeDestroy')
                        //此处调用add，还会调用方法，但是方法里面所有对数据的修改都不会再更新了
                        this.add()
                    },
                    destroyed() {
                        console.log('destroyed')
                    },
                })

                new Vue({
                    el:'#root2',
                    //可以使用template代替模板，但是内容只能有一个根节点包裹
                    //不能使用<template><template/>标签作为根节点包裹，因为它在页面是不展示的，它里面不确定有几个根元素
                    template:`
                    <div>
                        <button @click="x++">点我x++</button>
                        <h2>{{x}}</h2>
                    </div>`,
                    data:{
                        x:0
                    },
                })

        </script>

        
    </body>
</html>